
#index {
  color: #d3d6dd;
  width: 100%;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;

  .bg {
    width: 100%;
    height: 100%;
    padding: 0 16px 0 16px;
    background: #02004c;
    //background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
    .host-body {
      width: 100%;
      height: 100%;
      .jc-center {
        width: 100%;
        position: relative;
        .topBox {
          position: relative;
          height: 70px;
          background: url('../assets/数据屏/顶部.png') no-repeat;
          background-size: cover;
          background-position: center center;
        }
        .title-text {
          position: absolute;
          left: 50%;
          top:50%;
          transform: translate(-50%,-50%);
          font-size: 26px;
          color: #fff;
          font-weight: 600;
        }
      }
      // 第二行
      .secondLineBox {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        .firstPartBox,
        .thirdPartBox {
          width: 24%;
          height: 40px;
          border: 1px solid skyblue;
          background-color: #004774;
          border-radius: 6px;
          line-height: 40px;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
          color: #00caf0;
        }
        .secondPartBox {
          width: 48%;
          display: flex;
          height: 40px;
          justify-content: space-between;
          padding-left: 50px;
          padding-right: 50px;

          line-height: 40px;
          .secondPartBox-left,
          .secondPartBox-right {
            display: flex;
            font-size: 22px;
            font-weight: 700;
            color: #4185f0;
            letter-spacing: 5px;
          }
        }
      }

      //第三行
      .thirdMainBox {
        display: flex;
        justify-content: space-between;
        margin-top: 2px;
        .leftMainBox {
          width: 27%;
          height: 720px;
          background-color: #02004c;
        }
        .centerMainBox {
          width: 43%;
          height: 580px;
        }
        .rightMainBox {
          width: 27%;
          height: 680px;
          background-color: #02004c;
        }
      }

      //第四行
      .fouthBottomBox {
        display: flex;
        justify-content: space-between;
        //align-items: flex-end;
        margin-top: 20px;
        position: relative;
        padding: 10px;
      }

      .aside-width {
        width: 40%;
      }
      .react-r-s,
      .react-l-s {
        background-color: #0f1325;
      }

      // 平行四边形
      .react-right {
        &.react-l-s {
          text-align: right;
          width: 500px;
        }
        font-size: 18px;
        width: 300px;
        line-height: 50px;
        text-align: center;
        transform: skewX(-45deg);

        .react-after {
          position: absolute;
          right: -25px;
          top: 0;
          height: 50px;
          width: 50px;
          background-color: #0f1325;
          transform: skewX(45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(45deg);
        }
      }

      .react-left {
        &.react-l-s {
          width: 500px;
          text-align: left;
        }
        font-size: 18px;
        width: 300px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        transform: skewX(45deg);
        background-color: #0f1325;

        .react-before {
          position: absolute;
          left: -25px;
          top: 0;
          height: 50px;
          width: 50px;
          background-color: #0f1325;
          transform: skewX(-45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(-45deg);
        }
      }

      .body-box {
        margin-top: 16px;
        display: flex;
        flex-direction: column;

        //下方区域的布局
        .content-box {
          display: grid;
          grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
        }

        // 底部数据
        .bototm-box {
          margin-top: 10px;
          display: grid;
          grid-template-columns: repeat(2, 50%);
        }
      }
    }
  }
}